<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加店员</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="./../asset/css/datepicker.css"/>
		<link rel="stylesheet" type="text/css" href="../asset/css/bootstrapValidator.css"/>
    <link href="./../css/comm.css" rel="stylesheet">
    <link href="./../css/addMembers.css" rel="stylesheet">
	<style type="text/css">
		.addPhoto{
			background-color: #acb7bf;
		}
		body{
			background-color: #fff;
		}
		.nav-justified{
			border: none;
		}
		.control-label{
			white-space: nowrap;
		}
		.form-horizontal,.shopAssitantRow{
			height: 80%;
		}
		.addPhoto{
			height: 100%;
		}
	</style>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- begin header -->
    <header>
        <nav class="navbar navbar-default" >
          <ul class="nav nav-tabs nav-justified" style="width: 96%;margin: 0 auto">
            <li>
              <p class="glyphicon glyphicon-menu-left"></p>
            </li>
            <li><p>添加店员</p></li>
          </ul>
        </nav>
    </header>
    <!-- end header -->
    <!-- begin content -->
      <div class="content">
					<div class="container">
						<div class="row memberFormRow" style="margin: 0">
							<div class="col-md-4 addPhoto textcenter">
								<div class="add-img">
									<img style="width: 200px;height: 200px;" src="../img/addFile.jpg" id="headerImg">
									<input type='file' id='file' name='file' accept='image/*'  onchange="preview(this)"/>
								</div>
								<div class="col-md-8 col-md-offset-2 form-btns">
										<button class="btn btn-default">取消</button>
										<button class="btn btn-success" id="subBtn">保存</button>
								</div>
							</div>
							<div class="col-md-8">
								<form class="form-horizontal" role="form" id="shopAssitantForm">
								<fieldset>
									<div class="form-group">
											<div class="col-sm-4">
												<input type="text" class="form-control" name="headImgUrl" style="display: none;" id="imgurl">
											</div>
									</div>
									<div class="form-group">
											<label for="inputName" class="col-sm-2 control-label"><span class="colorfe2">*</span>姓名</label>
											<div class="col-sm-4">
												<input type="text" class="form-control" id="inputName" placeholder="请输入姓名" name="personelName">
											</div>
											<label class="col-sm-2 control-label"><span class="colorfe2">*</span>性别</label>
											<div class="col-sm-4">
												<select class="form-control sex">
												<option value="0">男</option>
												<option value="1">女</option> 
												</select>
											</div>
									</div>
									<div class="form-group">
											<label class="col-sm-2 control-label">生日</label>
											<div class="col-sm-4">
												<div class="input-group date">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                            <input type="text" class="form-control" name="birth">
                        </div>          
											</div>
											<label class="col-sm-2 control-label">员工号</label>
											<div class="col-sm-4">
												<input type="text" class="form-control" placeholder="请输入员工号" name="empno">
											</div>
									</div>
									<div class="form-group">
											<label class="col-sm-2 control-label" for="inputPhone">电话</label>
											<div class="col-sm-4">
												<input type="text" class="form-control" placeholder="请输入电话号码" id="inputPhone" name="phone">
											</div>
											<label class="col-sm-2 control-label">入职时间</label>
											<div class="col-sm-4">
												<div class="input-group date">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                            <input type="text" class="form-control" name="entryTime">
                        </div> 
											</div>
									</div>
								</fieldset>
								<fieldset>
									<div class="form-group">
										<label for="inputID" class="col-sm-2 control-label">身份证</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="inputID" placeholder="请输入身份证号码" name="personId">
										</div>
									</div>
								</fieldset>
								<fieldset>
									<div class="form-group">
										<label for="inputAddr" class="col-sm-2 control-label">地址</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="inputAddr" placeholder="请输入地址" name='address'>
										</div>
									</div>
								</fieldset>
								<fieldset>
									<div class="form-group">
										<label for="inputOther" class="col-sm-2 control-label">备注</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="inputOther" placeholder="请输入备注" name="remarks">
										</div>
									</div>
								</fieldset>
								<div class="row " style="margin: 0">
									<div class="col-xs-6 col-md-3 col-md-offset-9 form-btns">
											<button class="btn btn-default">取消</button>
											<button class="btn btn-success" id="subBtn">保存</button>
									</div>
								</div>
								</form>
						</div>
					</div>
      </div>
      <!-- end content -->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../asset/js/bootstrap.min.js?v=3.3.7"></script>
		<!-- 日期选择 -->
		<script type="text/javascript" src="../asset/js/bootstrap-datepicker.js"></script>
		<script type="text/javascript" src="../asset/js/cropper.min.js"></script>
		<!-- 表单验证 -->
		<script src="../asset/js/bootstrapValidator.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/comm.js"></script>
    <script type="text/javascript">
			//图片预览
			var attachmentUrl;
			function preview(obj) {
					var url= window.URL.createObjectURL(obj.files[0]);
					$("#headerImg").attr("src",url);
					imgUpload(obj.files[0]);
			}
			/*上传图片*/
			function imgUpload(file){
					var formData=new FormData();
					formData.append("imageFile",file);
					$.ajax({
						url: defaultUrl+"/web/uploadHeader",
						type : "post",
						processData : false,
						contentType : false,
						data:formData,
						success : function(data) {
							attachmentUrl = data.obj.imagePath;
							$('#imgurl').val(attachmentUrl);
							}
					});
			}
			$(function () {
					/* 初始化表单验证 */
					 $('#shopAssitantForm').bootstrapValidator({
　　　　　　　 message: 'This value is not valid',
            　feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　　　　   },

            fields: {
                personelName: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '电话号码不能为空'
                        }
                    }
                }
            }
        });
				// 日期选择
				$('.input-group.date').datepicker({
					todayBtn: "linked",
					keyboardNavigation: false,
					forceParse: false,
					calendarWeeks: true,
					autoclose: true
				});
							$('body').on('click','#subBtn',function(){
                    var formData=$('#shopAssitantForm').serialize();
                    /*解析得到的表单数据*/
                    $.asyncAx(
                        '/web/basePersonnel/insertInformation',
                        formData,
                        null,
                        null,
                        null,
                        function(data){
                            var curdata=data.obj;
                            console.log(curdata)
                        },
                        function(){

                        }
                    );
                })
            })

		</script>
  </body>
</html>